<html>
	<script type="text/javascript" src="PxLoader.js"></script>
	<script type="text/javascript" src="PxLoaderImage.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			var loader = new PxLoader(), 
		    backgroundImg = loader.addImage('../../game/runner/images/grasslands_grid_s.png'), 
		    treesImg = loader.addImage('../../game/runner/images/other.png');
		    //ufoImg = loader.addImage('images/ufo.png'); 
			// callback that will be run once images are ready 
			loader.addCompletionListener(function(){
			   var canvas = document.getElementById('sample1-canvas');
			   ctx = canvas.getContext('2d'); 
			 
			   ctx.drawImage(backgroundImg, 0, 0); 
			   ctx.drawImage(treesImg, 0, 104); 
			   //ctx.drawImage(ufoImg, 360, 50); 
			}); 
			 
			// begin downloading images 
			loader.start(); 
		}
	</script>
	<canvas id="sample1-canvas" width="1200" height="600"/>
</html>